<template>
  <div class="member_list">
    <div class="user_item" v-for="item in showMemberList" :key="item.nickname">
      <div class="user_item_box">
        <img class="user_item_img" :src="item.headingimg" alt="" />
        <div class="user_item_inner">
          <div class="user_info">{{ item.nickname }}</div>
          <div class="user_remark">{{ item.username }}</div>
          <div class="user_card_tag">{{ roleCompute(item.roleList) }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { getRoleList } from '@/service/main/main'

export default defineComponent({
  async setup() {
    // 获取vuex

    // 获取用户选择数据
    const roleList = [
      {
        key: -1,
        value: '所有角色',
      },
      {
        key: 0,
        value: '超级管理员',
      },
      {
        key: 1,
        value: '管理员',
      },
      {
        key: 2,
        value: '主播',
      },
      {
        key: 3,
        value: '运营者',
      },
    ]
    // 权限索引
    let selectRoleIndex = 0
    const role = roleList[selectRoleIndex].key
    let memberList: any[] = []
    let showMemberList: any[] = []

    // 获取用户列表
    let getRoleListRes = await getRoleList('', role, 0, 30)
    memberList = getRoleListRes
    // console.log(memberList, 'memberList')
    showMemberList = memberList

    const inputChange = (value: any) => {
      showMemberList = memberList.filter((item) => {
        return (
          item.nickname.indexOf(value) !== -1 ||
          item.username.indexOf(value) !== -1
        )
      })
    }
    const roleCompute = (event: any) => {
      // console.log(event)
      let roleName = ''
      event.forEach((element: any) => {
        if (element == 0) {
          roleName += '超级管理员 '
        } else if (element == 1) {
          roleName += '管理员 '
        } else if (element == 2) {
          roleName += '主播 '
        } else if (element == 3) {
          roleName += '运营者 '
        }
      })
      return roleName
    }
    return {
      selectRoleIndex,
      memberList,
      showMemberList,
      inputChange,
      roleCompute,
    }
  },
})
</script>

<style scoped lang="less">
.member_list {
  padding: 20px;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  .user_item {
    padding-bottom: 10px;
    // display: flex;
    width: 30%;
    justify-content: space-around;
    .user_item_box {
      display: flex;
      .user_item_img {
        width: 88px;
        height: 88px;
        border-radius: 5px;
      }
      .user_item_inner {
        margin-left: 0.3rem;
        display: flex;
        flex-direction: column;
        .user_info {
          opacity: 0.9;
          flex: 1;
          font-size: 14px;
          color: #333333;
          margin-bottom: 2px;
          text-overflow: ellipsis;
          overflow: hidden;
          line-height: 20px;
        }
        .user_remark {
          flex: 1;

          line-height: 20px;
          opacity: 0.55;
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: #333333;
          margin-bottom: 20 px;
        }
        .user_card_tag {
          background: rgba(0, 0, 0, 0.04);
          border-radius: 2 px;
          font-size: 14px;
          width: auto;
          height: auto;
          text-align: center;
          color: rgba(0, 0, 0, 0.55);
          line-height: 18px;
        }
      }
    }
  }
}
</style>
